在逛網拍開心瞎拚時，伺服器怎麼知道你是誰、你喜歡什麼、你買了什麼呢？
此時需要一些能夠讓伺服器辨別「你是誰」、「你喜歡什麼」、「你做了什麼」的機制，這些機制可以儲存在使用者端中，方便之後使用。

Cookie

• 以瀏覽器閱覽網頁時，網頁留在使用者電腦的一小段訊息
• 使用者可以自行決定要接受、拒絕或刪除 cookie
• 每次請求相同網域時，會把這包 cookie 送往同一台伺服器，這樣伺服器就能識別你是誰
• 存在使用者端（client）的 Cookie 都是可見的（visible），有被竄改的風險。故可依需求改用其他不透明的機制，來保護如使用者身分驗證的資訊。（如 JSON Web Tokens）
• cookie 可用不同方式設定：
  • 前端：以 JavaScript 設定 document.cookie
  • 後端：在 HTTP header 設定 Set-Cookie
• 用來存放各種設定。有三種類型：
  • Session 管理（Session management）
    • 例如：
      • 使用者登入資訊
      • 購物車
      • 遊戲分數
  • 個人化（Personalization）
    • 例如：
      • 佈景主題
      • 使用者設定
  • 追蹤（Tracking）
    • 例如：
      • 記錄使用者行為
      • 分析使用者行為

因為談的是前端，所以以下介紹如何用 JavaScript 設定 cookie：

document.cookie

• 備註：用 document.cookie 一次只能設定／更新一個 cookie

// 語法
// 讀取所有可從此訪問的 cookie
allCookies = document.cookie;

// 設定一個 cookie
document.cookie = newCookie;

參數說明

• newCookie：格式為 key=value。是鍵值對（key-value pair）形式的字串 ，用來設定指定的 cookie。key 為此 cookie 的名稱，可以自由設定。
  • 字串可由 encodeURIComponent(string) 處理，來消去那些不被 cookie 接受的字元（如逗號、分號或空格）。

這是其中一種處理 cookie 的方法：使用正規表達式取得與設定 cookie 之 key 與 value。
token 來自後端。

const now = new Date();
const expireTime = now.getTime() + 1000 * 36000;
const expires = new Date(now.setTime(expireTime));

// tokenName 可以換成自定義的名稱
document.cookie = `tokenName=${token}; expires=${expires.toUTCString()};path=/;`;

const token = document.cookie.replace(
  /(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/,
  "$1"
);

Storage

• Web Storage API 中的 storage 介面提供了存取特定 domain session 與 locak stoarge 資料的方法，並可對新增、刪除或修改資料。

• 儲存方式有兩種：

  • localStorage：會永久儲存在使用者電腦內，直到被清除。
  • sessionStorage：僅存在於瀏覽器開啟頁面時，關閉頁面時就會被清除。

• 屬性：

  • Storage.length：數字，表示 Storage 的物件數量，僅可讀取。

• 方法：

  • Storage.key()：傳入數字 n，即可得到 Storage 內第 n 個值的 key。
  • Storage.getItem()：傳入 key，可得到 Storage 內此 key 值對應的 value。
  • Storage.setItem()：傳入 key 與 value 時，可以新增或替換掉原有的值。
  • Storage.removeItem()：傳入 key 值，會把此 key 值從 Storage 中刪去。
  • Storage.clear()：會將所有 Storage 內的 key 刪掉。

// 語法（部分）
localStorage.setItem("token", "abcd");
localStorage.getItem("token");

來個練習吧！例子來自 GPT

// 將資料儲存在 localStorage 中
localStorage.setItem("username", "john_doe");

// 從 localStorage 中讀取資料
const username = localStorage.getItem("username");
console.log("使用者名稱：", username);

// 移除 localStorage 中的資料
localStorage.removeItem("username");

喔耶第 29 天惹！！

參考資料

• Cookie - MDN Web Docs Glossary: Definitions of Web-related terms | MDN，https://developer.mozilla.org/en-US/docs/Glossary/Cookie
• Cookie - MDN Web 文档术语表：Web 相关术语的定义 | MDN，https://developer.mozilla.org/zh-CN/docs/Glossary/Cookie
• Cookie - 術語表 | MDN，https://developer.mozilla.org/zh-TW/docs/Glossary/Cookie
• HTTP cookies - HTTP | MDN，https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Cookies
• Using HTTP cookies - HTTP | MDN，https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
• Cookie - 維基百科，自由的百科全書，https://zh.wikipedia.org/wiki/Cookie
• Document: cookie property - Web APIs | MDN，https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
• JavaScript Cookie - JavaScript (JS) 教學 Tutorial，https://www.fooish.com/javascript/cookie.html#google_vignette
• 六角學院課程：vue 實戰影音班
• Storage - Web APIs | MDN，https://developer.mozilla.org/zh-TW/docs/Web/API/Storage